<template>
  <div class="destination-container">
    <!-- v-lazy 986ms -->
    <div class="bg-container">
      <div class="banner-bottom">
        <a class="show-arrdown" @click="toNextpage"></a>
        <!-- <div class="show-ft">
          <div class="show-ft-item pic-from">
            <i></i>
          </div>
          <div class="show-ft-item"></div>
          <div class="show-ft-item pic-share"></div>
        </div> -->
      </div>
    </div>
    <div class="container">
      <div class="banner">
        <div class="banner-search">
          <p class="msg">Don't fear the unknown</p>
          <div class="search-area">
            <input type="text" />
            <a class="search-btn">
              <i class="icon-search"></i>
            </a>
          </div>
          <ul class="search-bottom">
            <li><a href="#">上海</a></li>
            <li><a href="#">杭州</a></li>
            <li><a href="#">东京</a></li>
            <li><a href="#">天津</a></li>
            <li><a href="#">长沙</a></li>
          </ul>
        </div>
        <div class="banner-info">
          <div class="banner-info-border">
            <p class="info-title">神仙海岛的三款热门玩法，去普吉一定不能错过</p>
            <p class="info-text">
              关于泰国普吉岛，这个多面风情的岛屿，常年位于境外旅游热搜榜前列，第一次去的人，容易被它的热带海岛风情和高性价比吸引到想再二刷；第N次去的人，更是因为每次都能发现普吉的新玩法，让人想再多宠幸一遍。
            </p>
          </div>
          <a href="#">阅读全文</a>
        </div>
      </div>

      <!-- tab区域 -->
      <DestinationTab :tabItemDate="tabItemHot" title="热门目的地" />

      <Recommend :tabItemDate="tabItemRecommend" title="当季推荐" />

      <Theme :tabItemDate="tabItemTheme" title="主题精选" />
    </div>

    <GlobalDestination :globalDesData="globalDesData" />
  </div>
</template>

<script>
import DestinationTab from "../components/DestinationTab";
import Recommend from "../components/Recommend";
import Theme from "../components/Theme";
import GlobalDestination from "../components/GlobalDestination";
import { mapState, mapActions } from "vuex";
export default {
  name: "Destination",
  data() {
    return {};
  },
  components: {
    DestinationTab,
    Recommend,
    Theme,
    GlobalDestination,
  },
  mounted() {
    this.getDestination();
  },
  computed: {
    ...mapState({
      destination: (state) => state.destination.destination,
    }),
    tabItemHot() {
      return this.destination.destination;
    },
    tabItemRecommend() {
      return this.destination.recommendSpot;
    },
    tabItemTheme() {
      return this.destination.themeSelection;
    },
    globalDesData() {
      return this.destination.country;
    },
  },
  methods: {
    ...mapActions("destination", ["getDestination"]),
    toNextpage() {
      document.documentElement.scrollTop = 600;
    },
  },
};
</script>

<style lang="stylus" scoped>
.destination-container {
  width: 100%;
  position: relative;
}

.bg-container {
  position: absolute;
  width: 100%;
  height: 600px;
  background-image: url('https://b1-q.mafengwo.net/s15/M00/0F/5F/CoUBGV28HDuALpzxABR490kDN0M39.jpeg');
  background-position: 0px, -100px;
  background-repeat: no-repeat;
  background-size: cover;

  .banner-bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 13;

    .show-arrdown {
      position: absolute;
      bottom: 20px;
      left: 50%;
      margin-left: -18px;
      width: 36px;
      height: 20px;
      background: url('../assets/images/9f24f656-3927-42c7-9599-e48b305b007c.png') no-repeat -124px -376px;
      overflow: hidden;
    }

    .show-ft {
      position: absolute;
      height: 30px;
      width: 200px;
      background-color: #fff;
      right: 0;
      margin-top: 10px;

      .pic-from i {
        display: inline-block;
        width: 50px;
        height: 50px;
        background: url('../assets/images/place-sprites3.png (350×300).png') no-repeat 10px 10px;
        // overflow: hidden;
      }
    }
  }
}

.container {
  width: 1200px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.banner {
  width: 1200px;
  height: 450px;
  margin: 150px auto 0;
  display: flex;
  justify-content: space-around;
  align-items: center;

  .banner-search {
    width: 400px;
    // height: 200px;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 15px;

    .msg {
      font-size: 20px;
      color: #fff;
      margin-bottom: 15px;
      font-weight: normal;
      line-height: 1;
      font-family: 'Microsoft Yahei';
    }

    .search-area {
      height: 46px;
      margin-bottom: 10px;

      input {
        float: left;
        width: 308px;
        height: 46px;
        margin: 0 6px 0 0;
        padding: 0 20px;
        background-color: #fff;
        border: 0 none;
        line-height: 46px;
        font-size: 18px;
        color: #111;
        border-radius: 4px;
        outline: none;
      }

      .search-btn {
        float: left;
        width: 45px;
        height: 46px;
        background-color: #ff9d00;
        border-radius: 4px;
        text-align: center;

        .icon-search {
          display: inline-block;
          margin-top: 11px;
          width: 24px;
          height: 24px;
          background: url('http://images.mafengwo.net/images/header-sprites.png') no-repeat 0 -110px; // images.mafengwo.net/images/header-sprites.png) no-repeat 0 -110px;
          overflow: hidden;
          vertical-align: top;
        }
      }
    }

    .search-bottom {
      list-style: none;
      display: flex;
      padding: 0;

      li {
        margin-right: 10px;

        a {
          color: #fff;
          font-size: 14px;
          text-decoration: none;
        }
      }
    }
  }

  .banner-info {
    width: 600px;
    color: #fff;

    .banner-info-border {
      border-right: 7px solid #fff;
      padding-right: 30px;
    }

    // height: 300px;
    .info-title {
      font-size: 50px;
      font-weight: normal;
      line-height: inherit;
      margin-bottom: 0;
    }

    .info-text {
      font-size: 18px;
      line-height: 30px;
      margin-top: 20px;
      margin-bottom: 20px;
    }

    a {
      color: #fff;
      font-size: 24px;
      text-decoration: underline;
    }
  }
}
</style>